<!-- 阻塞按钮 -->
<template>
  <div @click="containerClick($event)">
    <slot name="container">
    </slot>
  </div>
</template>

<script lang="ts" setup>
import {ref, reactive, defineProps, defineEmits, PropType} from 'vue';
import {ExecFunction} from '@/utils/YzjUtils';

const props = defineProps({
  /** 阻塞时间 */
  blockageTime: {
    type: Number,
    required: true
  },
  /** 阻塞时传递的参数 */
  execData: {
    type: Object
  },
  /** 是否指向当前元素的子类 */
  child: {
    type: Boolean
  }
});

interface BlockageEmits {
  (e: 'nonBlockageFunction', data: any): void

  (e: 'blockageFunction', data: number): void
}

const emits = defineEmits<BlockageEmits>();
const blockage = new ExecFunction();
const containerClick = (ev) => {
  blockage.blockageFunction(() => {
    if (props.child) {
      emits('nonBlockageFunction', {execData: props.execData, event: ev.path[1]});
    } else {
      emits('nonBlockageFunction', {execData: props.execData, event: ev});
    }
  }, (time) => {
    emits('blockageFunction', time);
  }, props.blockageTime);
}

</script>

<style scoped>

</style>
